<template>
    <div class="set-column">
        <el-popover ref="tabHeadPopoverRef" placement="bottom" trigger="click" popper-class="set-popover">
            <el-container class="set-container">
                <el-header class="set-container__header">
                    <div class="set-container__header__tips">
                        已选择
                        <span>{{ selectedList.length }}</span>
                        /{{ checkData.length }}
                    </div>
                    <div class="set-container__header__btns">
                        <span @click="save">确认</span>
                        <span @click="reset">重置</span>
                    </div>
                </el-header>
                <el-main class="set-container__main">
                    <el-input v-model="searchVal" size="mini" class="set-container__main__search" placeholder="请输入内容(支持模糊搜索)" suffix-icon="el-icon-search" @input="changeInputVal" />
                    <el-checkbox-group v-if="checkDroupList.length > 0" v-model="selectedList" class="set-container__main__group">
                        <el-checkbox class="set-container__main__group__checkbox" v-for="item in checkDroupList" :key="item.code" :label="item.code" :disabled="item.disabled">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                    <div v-else>
                        <h5>未搜索到匹配数据</h5>
                    </div>
                </el-main>
            </el-container>
            <!-- slot -->
            <i class="el-icon-setting" slot="reference"></i>
        </el-popover>
    </div>
</template>

<script>
export default {
    name: 'tableHeadSetting',
    props: {
        checkData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            searchVal: '',
            selectedList: [], // 勾选中的数组
            checkDroupList: [], // 循环checkBox的数组
        }
    },
    watch: {
        checkData: {
            immediate: true,
            deep: true,
            handler(nv) {
                if (nv && nv.length > 0) {
                    this.checkDroupList = nv;
                    this.selectedList = this.checkDroupList.filter((i) => i.shown === true).map((i) => i.code);
                }
            }
        }
    },
    created() {
        this.checkDroupList = this.checkData
    },
    methods: {
        changeInputVal(inputVal) {
            if (inputVal) {
                if (!this.checkData.length) return
                const result = [];
                this.checkData.forEach(item => {
                    if (this.checkStrContain(item.name, inputVal)) {
                        result.push(item)
                    }
                })
                this.checkDroupList = result
            } else {
                this.checkDroupList = this.checkData;
            }
        },
        /**
         * 检查字符串i中是否包含j
         */
        checkStrContain(i, j) {
            if (!i || !j) return false;
            const newi = i;
            const newj = j;
            let a;
            let b;
            if (newi.length > newj.length) {
                a = newi;
                b = newj;
            } else {
                a = newj;
                b = newi;
            }
            let count = 0;
            for (let bi = 0; bi < b.length; bi++) {
                const bArr = b.split('');
                if (a.indexOf(bArr[bi]) > -1) {
                    count += 1;
                } else {
                    break;
                }
            }
            if (b.length === count) {
                return true;
            }
            return false
        },
        save() {
            if (!this.selectedList.length) {
                this.$message.warning('请至少选择一项保存')
            } else {
                const fileds = []
                this.selectedList.forEach(v => {
                    this.checkData.forEach(n => {
                        if (n.code === v) {
                            fileds.push({ ...n, shown: true })
                        }
                    })
                })
                this.$message.success('OK！将传值给父组件更新表格');
                this.$emit('saveTabHeads', fileds);
            }
        },
        reset() {
            this.searchVal = '';
            this.checkDroupList = this.checkData
        }
    }
}
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.set-popover {
    width: 220px !important;
    border: 1px solid rgba(76, 255, 254, 0.25);
    border-radius: 4px;
    .set-container {
        min-height: 100px;
        max-height: 375px;
        padding-bottom: 15px;
        &__header {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 0px !important;
            height: 45px !important;
            align-items: center;
            &__tips {
                span {
                    color: rgba(76, 225, 254, 0.8);
                }
            }
            &__btns {
                span {
                    padding-left: 10px;
                    cursor: pointer;
                    &:hover {
                        color: rgba(76, 225, 254, 1);
                    }
                }
            }
        }
        &__main {
            border-top: 1px solid rgba(76, 255, 254, 0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px !important;
            &__search {
                margin-bottom: 10px;
            };
            &__group {
                display: flex;
                flex-direction: column;
                width: 100%;
                &__checkbox {
                    height: 24px;
                    display: flex;
                    margin: 0;
                    align-items: center;
                }
            }
        }
    }
}
</style>